<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"  ></canvas>
<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
    var g=ctx.createLinearGradient(0,0,550,550);
    //    2,添加渐变的颜色
    g.addColorStop(0,"red");
    g.addColorStop(0.3,"yellow");
    g.addColorStop(0.6,"blue");
    g.addColorStop(1,"pink");
    //    3,使用渐变对象
    ctx.strokeStyle=g;
    ctx.fillStyle=g;
    ctx.lineWidth=10;

//阴影
//    模糊值
    ctx.shadowBlur=30;
//    颜色
    ctx.shadowColor="red";
//    位移
    ctx.shadowOffsetX=10;
    ctx.shadowOffsetY=10;

    //画文字
    ctx.font="300px 黑体";
    //    ctx.strokeText("芳仔",100,100)
    ctx.fillText("芳仔",30,400)
</script>
</body>
</html>